<html>
  <head>
    <title>聊天室</title>
    <script src="./js/jquery-1.12.3.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
body{
	margin-top:5px;
}
</style>
</head>
  <body>
    <div class="container">
    	<div class="row">
    		<div class="col-md-3">
    		<div class="panel panel-primary">
				  <div class="panel-heading">
				    <h3 class="panel-title">当前登录用户</h3>
				  </div>
				  <div class="panel-body">
				    <div class="list-group">
					 <a href="#" class="list-group-item">你好，${sessionScope.username}</a>
					 <a href="logout" class="list-group-item">退出</a>
					</div>
				  </div>
				</div>
    			<div class="panel panel-primary" id="online">
				  <div class="panel-heading">
				    <h3 class="panel-title">当前在线的其他用户</h3>
				  </div>
				  <div class="panel-body">
				    <div class="list-group" id="users">
					</div>
				  </div>
				</div>
				<div class="panel panel-primary">
				  <div class="panel-heading">
				    <h3 class="panel-title">群发系统广播</h3>
				  </div>
				  <div class="panel-body">
				    <input type="text" class="form-control"  id="msg" /><br>
				    <button id="broadcast" type="button" class="btn btn-primary">发送</button>
				  </div>
				</div>
    		</div>
  			<div class="col-md-9">
  				<div class="panel panel-primary">
				  <div class="panel-heading">
				    <h3 class="panel-title" id="talktitle"></h3>
				  </div>
				  <div class="panel-body">
				    <div class="well" id="log-container" style="height:400px;overflow-y:scroll">
				    
				    </div>
				    	<input type="text" id="myinfo" class="form-control col-md-12" /> <br>
				    	<button id="send" type="button" class="btn btn-primary">发送</button>
				    </div>
				</div>
  			</div>
    	</div>
    </div> 
    <video width="520" height="240" src="js/pian.mp4" controls="controls" ></video>
    <video width="320" height="240" src="js/pian.mp4" id="v"  controls="controls" onplaying="video.monitoring()" onplay="video.play()"></video>
   	<button id="bf" type="button" class="btn btn-primary" onclick="bf()">鎾斁/鏆傚仠</button>
   	<button id="kj" type="button" class="btn btn-primary" onclick="dwbf()">瀹氫綅鎾斁</button>
   	<button id="cb" type="button" class="btn btn-primary" onclick="cb()">閲嶆挱</button>
    
<script>
var timer;
var uid = "1";
var to_uid = "2";
var websocket;
var audio = document.getElementById('v'); 
var video = {
	audioStat : false,
	reset : function(){
		 audio.currentTime = 0;
	},
	play : function(){
		if(audio!==null){
			video.audioStat = true;
			 for(var i=1;i<5;i++){
	    		var data={};
				data["from"]="1";
				data["fromName"]="yrx";
				data["to"]=i;
				data["text"]="bf"+Math.ceil(audio.currentTime);
	    		websocket.send(JSON.stringify(data));
			}
		}
	},
	monitoring : function (){
		if(timer != null){
			window.clearInterval(timer);
		}
		var time1 = audio.currentTime;
		timer = setInterval(function(){
			time2 = time1;
			time1 = audio.currentTime;
			console.info(time1-time2);
			if((time1-time2)>1){
				console.info("蹇繘浜�");
				for(var i=1;i<5;i++){
	        		var data={};
					data["from"]="1";
					data["fromName"]="yrx";
					data["to"]=i;
					data["text"]="dwbf"+Math.ceil(time1);
	        		websocket.send(JSON.stringify(data));
				}
	        }else if(audio.paused && video.audioStat){
	        	video.audioStat = false;
	    		for(var i=1;i<5;i++){
	        		var data={};
					data["from"]="1";
					data["fromName"]="yrx";
					data["to"]=i;
					data["text"]="zt"+Math.ceil(time1);
	        		websocket.send(JSON.stringify(data));
				}
	        }
			if(time1 == audio.duration || time1 == 0){
				window.clearInterval(timer);
				console.info("鎾斁缁撴潫");
			}
		},300);
	}
}

$(document).ready(function() {
      // 鎸囧畾websocket璺緞
      	if ('WebSocket' in window) {
			websocket = new WebSocket("ws://127.0.0.1:8080/yl-websocket/ws?uid="+uid);
		} else if ('MozWebSocket' in window) {
			websocket = new MozWebSocket("ws://127.0.0.1:8080/yl-websocket/ws"+uid);
		} else {
			websocket = new SockJS("http://127.0.0.1:8080/yl-websocket/ws/sockjs"+uid);
		}
      //var websocket = new WebSocket('ws://127.0.0.1:8080/yl-websocket/ws');
    websocket.onmessage = function(event) {
     	 var data=JSON.parse(event.data);
     	 /* if(data.text == "bf"){
     		 bf();
     	 }else if(data.text.indexOf("dwbf")>-1){
     		 var time = data.text.split("dwbf")[1];
     		 dwbf(time);
     	 }else if(data.text == "cb"){
     		 cb();
     	 } */
     	 if(data.from>0||data.from==-1){//鐢ㄦ埛鎴栬�呯兢娑堟伅
          // 鎺ユ敹鏈嶅姟绔殑瀹炴椂娑堟伅骞舵坊鍔犲埌HTML椤甸潰涓�
          $("#log-container").append("<div class='bg-info'><label class='text-danger'>"+data.fromName+"&nbsp;"+data.date+"</label><div class='text-success'>"+data.text+"</div></div><br>");
          // 婊氬姩鏉℃粴鍔ㄥ埌鏈�浣庨儴
          scrollToBottom();
          }else if(data.from==0){//涓婄嚎娑堟伅
          	if(data.text!="${sessionScope.username}"){	
          		$("#users").append('<a href="#" onclick="talk(this)" class="list-group-item">'+data.text+'</a>');
          		alert(data.text+"涓婄嚎浜�");
          	}
          }else if(data.from==-2){//涓嬬嚎娑堟伅
          	if(data.text!="${sessionScope.username}"){	
          		$("#users > a").remove(":contains('"+data.text+"')");
          		alert(data.text+"涓嬬嚎浜�");
          	}
          }
    };
    $.post("onlineusers",function(data){
  		for(var i=0;i<data.length;i++)
  			$("#users").append('<a href="#" onclick="talk(this)" class="list-group-item">'+data[i]+'</a>');
  	});
      
    $("#broadcast").click(function(){
    	$.post("broadcast",{"text":$("#msg").val()});
    });
      
    $("#send").click(function(){
    	var v=$("#myinfo").val();
		if(v==""){
			return;
		}else{
			var data={};
			data["from"]=uid;
			data["fromName"]=uid;
			data["to"]=to_uid;
			data["text"]=v;
			websocket.send(JSON.stringify(data));
			$("#log-container").append("<div class='bg-success'><label class='text-info'>鎴�&nbsp;"+new Date()+"</label><div class='text-info'>"+v+"</div></div><br>");
			scrollToBottom();
			$("#myinfo").val("");
		}
     });
  });

   function talk(a){
   	$("#talktitle").text("涓�"+a.innerHTML+"鐨勮亰澶�");
   	$("body").data("to",a.innerHTML);
   }
   function scrollToBottom(){
		var div = document.getElementById('log-container');
		div.scrollTop = div.scrollHeight;
	}
</script>    
    
  </body>
</html>
